import React, { useState } from 'react'
import { Select, Table } from 'antd';

export default function AntTable(props) {

    const { tableData, tableColumns, multSelect, multSelectChange, tableMultOperationSelectOption, tableDataReq, tableDataTotal } = props

    // 加载状态
    const [loading, setLoading] = useState(false);

    const start = (option) => {
        setLoading(true);
        // ajax request after empty completing
        setTimeout(() => {
            multSelectChange([]);
            setLoading(false);
        }, 1000);
    };

    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        multSelectChange(newSelectedRowKeys);
    };

    const rowSelection = {
        multSelect,
        onChange: onSelectChange,
    };

    const hasSelected = multSelect.length > 0;

    return (
        <>
            <span
                style={{
                    marginLeft: 8,
                }}
            >
                {hasSelected ? `选择了 ${multSelect.length} 项` : ''}
            </span>

            <Table rowSelection={rowSelection} columns={tableColumns} dataSource={tableData} pagination={{
                total: tableDataTotal,
                onChange: (value) => {
                    console.log('当前页:', value)
                    tableDataReq(value)
                },
                showTotal: (tableDataTotal) => {
                    return (
                        <span
                            style={{
                                fontSize: 14,
                                color: '#264653',
                                fontFamily: "微软雅黑",
                            }}
                        >共{tableDataTotal}条</span>
                    )
                },
            }} />

            <Select
                defaultValue='批量操作'
                style={{
                    width: 120,
                }}
                onChange={start}
                loading={loading}
                options={tableMultOperationSelectOption}
            />
        </>
    );
}